<script setup>
import { ref } from "vue";
import myChart from "@/components/myChart";
import { getRandomArrayElements } from "@/utils/tools.js";
import * as echarts from "echarts";
// let data1 = [
//   {
//     name: "重型一分厂",
//     value: 66.12
//   },
//   {
//     name: "叶片分厂",
//     value: 54.6
//   },
//   {
//     name: "金工分厂",
//     value: 73.4
//   },
//   {
//     name: "焊接分厂",
//     value: 81.9
//   },
//   {
//     name: "工业透平",
//     value: 21.9
//   },
//   {
//     name: "重型二分厂",
//     value: 61.9
//   },
//   {
//     name: "隔板分厂",
//     value: 81.9
//   },

// ];

let barTopColor = [
  "#feb27d",
  "#f6cc71",
  "#7aefc3",
  "#91e4ee",
  "#3389f3",
  "#4c63f0",
  "#8c7dff"
];
let barBottomColor = [
  "#feb17d",
  "#f6cc71",
  "#7aefc3",
  "#75c7db",
  "#3389f3",
  "#687df9",
  "#8c7dff"
];

const options = ref({
  grid: {
    top: "-10",
    left: 30,
    right: 30,
    bottom: 10,
    containLabel: true
  },
  tooltip: {
    show: false,
    backgroundColor: "rgba(13, 64, 71, 0.50)",
    borderColor: "rgba(143, 225, 252, 0.60)",
    padding: 8,
    textStyle: {
      color: "#fff"
    },
    formatter: params => {
      return `${params.name} ${params.value}%`;
    }
  },
  grid: {
    bottom: 50
  },

  xAxis: [
    {
      type: "category",
      data: [],
      offset: 10,
      axisTick: {
        show: false // 不显示坐标轴刻度线
      },
      splitLine: {
        show: false
      },
      axisLine: {
        // 轴线设置
        show: false, // 显示轴线
        lineStyle: {
          // 轴线样式设置
          color: "#C5C5C5", // 轴线颜色
          width: 1, // 轴线宽度
          type: "solid" // 轴线类型-虚线
        }
      },
      axisLabel: {
        interval: 0,
        rotate: 25, //值>0向右倾斜，值<0则向左倾斜
        textStyle: {
          color: "#F5F5F5", //更改坐标轴文字颜色
          fontSize: 12 //更改坐标轴文字大小
        }
      }
    }
  ],
  yAxis: [
    {
      splitLine: {
        show: false,
        lineStyle: {
          color: "#979797",
          type: [5, 10]
        }
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: "#F5F5F5", //更改坐标轴文字颜色
          fontSize: 12 //更改坐标轴文字大小
        }
      }
    }
  ],
  series: [
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [26, 10],
      symbolOffset: [0, -5],
      z: 12,
      itemStyle: {
        normal: {
          color: function(params) {
            return barTopColor[params.dataIndex];
          }
        }
      },
      label: {
        normal: {
          show: true,
          position: "top",
          formatter: "{a|{c}%}",
          rich: {
            a: {
              color: "inherit",
              fontSize: 14,
              align: "center"
            }
          }
        }
      },
      symbolPosition: "end",
      data: []
    },
    {
      name: function(params) {
        return barTopColor[params.name];
      },
      type: "pictorialBar",
      symbolSize: [26, 10],
      symbolOffset: [0, 5],
      z: 12,
      itemStyle: {
        normal: {
          color: function(params) {
            return barTopColor[params.dataIndex];
          }
        }
      },
      data: []
    },
    {
      type: "bar",
      itemStyle: {
        normal: {
          color: function(params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: barTopColor[params.dataIndex]
              },
              {
                offset: 1,
                color: barBottomColor[params.dataIndex]
              }
            ]);
          },
          opacity: 0.8
        }
      },
      z: 16,
      silent: true,
      barWidth: 26,
      barGap: "-100%", // Make series be overlap
      data: []
    }
  ]
});

let result = [
  { name: "重型一分厂", value: 20 },
  { name: "叶片分厂", value: 20 },
  { name: "金工分厂", value: 30 },
  { name: "焊接分厂", value: 52 },
  { name: "工业透平", value: 30 },
  { name: "重型二分厂", value: 28 },
  { name: "隔板分厂", value: 24 },
  { name: "重型一分厂1", value: 40 },
  { name: "叶片分厂1", value: 50 },
  { name: "金工分厂1", value: 60 },
  { name: "焊接分厂1", value: 72 },
  { name: "工业透平1", value: 40 },
  { name: "重型二分厂1", value: 38 },
  { name: "隔板分厂1", value: 34 }
];

const radomData = () => {
  options.value.xAxis[0].data = getRandomArrayElements(result, 7).map(
    item => item.name
  );
  let data = getRandomArrayElements(result, 7).map(item => item.value);
  options.value.series[0].data = data;
  options.value.series[1].data = data;
  options.value.series[2].data = data;
};

radomData();
setInterval(function() {
  radomData()
}, 3000);
</script>
<template>
  <div class="bottomBox1 baseBorderBg">
    <div class="baseBoxHeader">完好率统计</div>
    <div class="baseBoxBody">
      <myChart :option="options"></myChart>
    </div>
  </div>
</template>
